<%= render_component_tag :header do %>
  <%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
    <% toolbar.with_section padded: true do %>
      <a <% if landing_path %>href="<%= landing_path %>"<% end %> class="flex items-center space-x-3">
        <% if project_logo.present? %>
          <i class="header-project-icon">
            <%== project_logo %>
          </i>
        <% elsif project_logo != false %>
          <%= lookbook_render :logo, size: 3.7 %>
        <% end %>
        <% if project_name.present? %>
          <span class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
            <%= project_name %>
          </span>
        <% end %>
      </a>
    <% end %>

    <% toolbar.with_section padded: false, align: :right, class: "flex items-center -mt-px" do %>
      <div x-show="loading" x-cloak>
        <svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </div>

      <%= lookbook_render :button_group do |group| %>
        <% if @debug_menu %>
          <% group.with_button id: "debug-menu-button",
            icon: :help_circle,
            tooltip: "Debug info",
            class: "!text-lookbook-header-text", "x-show": "!loading" do |button| %>
            <% menu = lookbook_render :debug_menu,
              version: Lookbook::VERSION,
              docs_url: "https://lookbook.build/guide",
              repo_url: "https://github.com/lookbook-hq/lookbook" do %>
              <%= debug_data %>
            <% end %>
            <% button.with_dropdown.with_content(menu) %>
          <% end %>
        <% end %>

        <% group.with_button icon: :menu,
          "x-on:click.stop": "toggleSidebar",
          "x-show": "$store.layout.mobile && sidebarHidden",
          class: "!text-lookbook-header-text" %>

        <% group.with_button icon: :x,
          "x-on:click.stop": "toggleSidebar",
          "x-show": "$store.layout.mobile && !sidebarHidden",
          "x-on:keydown.esc.window": "closeMobileSidebar",
          class: "!text-lookbook-header-text" %>
      <% end %>
    <% end %>
  <% end %>

<% end %>
